import { ref, onMounted, onUnmounted } from "vue";

export function useMobileDetection() {
    const isMobile = ref(false);
    const isTablet = ref(false);
    const isPC = ref(false);

    const checkDevice = () => {
        const width = window.innerWidth;
        isMobile.value = width <= 768;
        isTablet.value = width > 768 && width <= 1400;
        isPC.value = width > 1400;
    };

    onMounted(() => {
        checkDevice();
        window.addEventListener("resize", checkDevice);
    });

    onUnmounted(() => {
        window.removeEventListener("resize", checkDevice);
    });

    return { isMobile, isTablet, isPC };
}